<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}图片定制工具{% endblock %}</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- 简化标签页管理器 -->
    <script src="{{ url_for('static', filename='js/simple_tabs.js') }}"></script>
    
    <!-- 自定义CSS -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/enterprise.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/tabs.css') }}" rel="stylesheet">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 应用主容器 -->
    <div class="app-wrapper">
        <!-- 侧边栏 -->
        <div class="sidebar-container">
            <div class="sidebar-logo">
                <h1>
                    <i class="bi bi-palette2"></i>
                    图片定制工具
                </h1>
            </div>
            <ul class="sidebar-menu">
                <li class="sidebar-menu-item {{ 'active' if request.endpoint == 'index' }}">
                    <a href="{{ url_for('index') }}">
                        <i class="bi bi-speedometer2"></i>
                        <span>工作台</span>
                    </a>
                </li>
                <li class="sidebar-menu-item {{ 'active' if request.endpoint and 'template' in request.endpoint }}">
                    <a href="{{ url_for('templates') }}">
                        <i class="bi bi-grid-3x3-gap"></i>
                        <span>底板管理</span>
                    </a>
                </li>
                {# 隐藏普通图片定制页面
                <li class="sidebar-menu-item {{ 'active' if request.endpoint and 'customize' in request.endpoint }}">
                    <a href="{{ url_for('customize') }}">
                        <i class="bi bi-palette"></i>
                        <span>图片定制</span>
                    </a>
                </li>
                #}
                <li class="sidebar-menu-item {{ 'active' if request.endpoint and 'exports' in request.endpoint }}">
                    <a href="{{ url_for('exports') }}">
                        <i class="bi bi-images"></i>
                        <span>导出管理</span>
                    </a>
                </li>
                <li class="sidebar-menu-item {{ 'active' if request.endpoint and 'intelligent' in request.endpoint }}">
                    <a href="{{ url_for('intelligent_positioning') }}">
                        <i class="bi bi-robot"></i>
                        <span>智能定位</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 主内容区域 -->
        <div class="main-container">
            <!-- 标签页组件 -->
            <div class="app-tabs-container">
                <div class="app-tabs-wrapper">
                    <div class="app-tabs-list" id="globalTabsList">
                        <div class="chrome-tab chrome-tab-current" data-url="/">
                            <div class="chrome-tab-content">
                                <div class="chrome-tab-favicon">🏠</div>
                                <div class="chrome-tab-title">工作台</div>
                            </div>
                        </div>
                        <div class="chrome-tab" data-url="/templates">
                            <div class="chrome-tab-content">
                                <div class="chrome-tab-favicon">🖼️</div>
                                <div class="chrome-tab-title">底板管理</div>
                            </div>
                        </div>
                        {# 隐藏普通图片定制标签页
                        <div class="chrome-tab" data-url="/customize">
                            <div class="chrome-tab-content">
                                <div class="chrome-tab-favicon">🎨</div>
                                <div class="chrome-tab-title">图片定制</div>
                            </div>
                        </div>
                        #}
                        <div class="chrome-tab" data-url="/exports">
                            <div class="chrome-tab-content">
                                <div class="chrome-tab-favicon">📁</div>
                                <div class="chrome-tab-title">导出管理</div>
                            </div>
                        </div>
                    </div>
                    <div class="app-tabs-actions">
                        <button class="app-tab-add-btn" id="globalNewTabBtn" title="新建标签页">
                            <i class="bi bi-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 顶部导航栏 -->
            <div class="navbar-container">
                <div class="breadcrumb-container">
                    {% block breadcrumb %}
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ url_for('index') }}">首页</a>
                        </li>
                        {% if request.endpoint and request.endpoint != 'index' %}
                        <li class="breadcrumb-item active">
                            {% if request.endpoint and 'template' in request.endpoint %}底板管理
                            {% elif request.endpoint and 'customize' in request.endpoint %}图片定制
                            {% elif request.endpoint and 'exports' in request.endpoint %}导出管理
                            {% else %}当前页面{% endif %}
                        </li>
                        {% endif %}
                    </ol>
                    {% endblock %}
                </div>
                
                <div class="navbar-right">
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                data-bs-toggle="dropdown">
                            <i class="bi bi-gear"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>用户设置</a></li>
                            <li><a class="dropdown-item" href="#"><i class="bi bi-question-circle me-2"></i>帮助文档</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 页面内容 -->
            <div class="app-main">
                <!-- Flash消息 -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <!-- 自定义JS -->
    <script src="{{ url_for('static', filename='js/common.js') }}"></script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>
